<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> WebSocket </title>
    <style>
        .main{
            border: 1px solid red;
            width: 600px;
            height: 600px;
            margin: auto;
        }
        #center{
            width: 400px;
            height: 400px;
            float: left;
            overflow: auto;
            border: 1px solid blue;
        }
        #right{
            width: 196px;
            height: 400px;
            float: right;
            overflow: auto;
            border: 1px solid blue;
        }
        #userCss{
            border: 1px solid chartreuse;
            width: 192px;
            height: 130px;
            float: right;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="main">
    <h4 style="text-align: center">简 易 聊 天 室</h4>
    <div id="center"></div>
    <div id="right">
        <p style="text-align: center"> 用户状态<p>
    </div>
    <textarea id="txtC" style="width: 400px;height: 130px;"></textarea>
    <div id="userCss">
        用户名:<input id="user" type="text" style="width:79px"/>
        <br/>
        <br/>
        <button id="btn" style="width:100px;height:50px"> 发 送 </button>
        <br/>
        <p></p>
        <button id="close"> 关 闭 连 接</button>
    </div>
</div>

<script type="text/javascript">

    var socke;

    document.getElementById("user").onblur=function () {
        var user = document.getElementById("user").value;

        socke = new WebSocket("ws://y416079762.oicp.vip/ws/test/"+user);

        //用户输入完用户名离开输入框 输入框变成禁用
        document.getElementById("user").disabled=true;
        //连接
        socke.onopen=function (msg) {
            console.log("已连接成功！");
        }
        socke.onclose=function () {
        }
        //接收后台信息
        socke.onmessage=function (msg) {

            //取出 标志用户 字段
            var userName =msg.data.substring(0,msg.data.indexOf("&"));
            if(userName=="userKet"){
                //取出用户
                var userAll = msg.data.substring(msg.data.indexOf("&")+1).split(",");
                for(var i=0;i<userAll.length;i++)
                    document.getElementById("right").innerHTML+="<p>"+userAll[i]+",已连接聊天室</p>";
            }
            if(userName=="conter"){
                var text = msg.data.substring(msg.data.indexOf("&")+1,msg.data.length);
                document.getElementById("center").innerHTML+="<p>"+text+"</p>";
            }


        }

        socke.onerror=function () {
            alert("发生了未知错误，请联系管理员....");
        };
    };

    //发送内容事件
    document.getElementById("btn").onclick=function(){
        var user = document.getElementById("user").value;
        if(user==""||user==null){
            alert("用户名不能为空");
            return false;
        }
        if(document.getElementById("txtC").value==""){
            alert("请输入内容!!!!");
            return false;
        }
        //向后台发送用户输入的内容
        var text = document.getElementById("txtC").value;
        socke.send(text);
        document.getElementById("txtC").value="";
    };

    //关闭连接
    document.getElementById("close").onclick=function () {
        socke.close();
        document.getElementById("user").disabled=false;
    };

</script>
</body>
</html>
